<template>
  <div>
    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
      <el-tab-pane v-for="(item,index) in list" :key="index" :label="item.label" :name="item.name">
        <keep-alive>
          <sysForms :groups="item.group" :fromitem="formItem" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane name="add" label="+新增配置">
        <keep-alive>
          <addItems />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { systems, formItem } from '@/api/general'
import sysForms from '../components/sysForms'
import addItems from '../components/addItems'
export default {
  name: 'Systems',
  components: { sysForms, addItems },
  data() {
    return {
      form: {},
      formItem: {},
      activeName: 'default',
      list: {}
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    getlist() {
      systems().then(response => {
        this.list = response.data
      })
      formItem().then(response => {
        this.formItem = response.data
      })
    }
  }
}
</script>
